<template>
  <div>
    <vxe-table
      border
      highlight-hover-row
      :data="datas"
      ref="xTable"
      size="small"
      :height="tableHeight"
      id="alarmTableView"
    >
      <vxe-table-column
        field="thing_name"
        title="设备"
        :filters="[{ data: '' }]"
        :filter-method="filterName"
      >
        <template #filter="{ $panel, column }">
          <select
            class="my-select"
            v-model="option.data"
            v-for="(option, index) in column.filters"
            :key="index"
            @change="$panel.changeOption($event, !!option.data, option)"
          >
            <option
              v-for="(label, cIndex) in devNameList"
              :key="cIndex"
              :value="label"
            >
              {{ label }}
            </option>
          </select>
        </template>
      </vxe-table-column>
      <vxe-table-column
        field="level"
        title="级别"
        width="70"
        :filters="levelList"
      ></vxe-table-column>
      <vxe-table-column
        field="station_name"
        title="站点"
        :filters="[{ data: '' }]"
        :filter-method="filterStationName"
      >
        <template #filter="{ $panel, column }">
          <select
            class="my-select"
            v-model="option.data"
            v-for="(option, index) in column.filters"
            :key="index"
            @change="$panel.changeOption($event, !!option.data, option)"
          >
            <option
              v-for="(label, cIndex) in stationNameList"
              :key="cIndex"
              :value="label"
            >
              {{ label }}
            </option>
          </select>
        </template>
      </vxe-table-column>
      <vxe-table-column
        field="alarm_name"
        title="告警名称"
        :filters="[{ data: '' }]"
        :filter-method="filterAlarmName"
      >
        <template #filter="{ $panel, column }">
          <select
            class="my-select"
            v-model="option.data"
            v-for="(option, index) in column.filters"
            :key="index"
            @change="$panel.changeOption($event, !!option.data, option)"
          >
            <option
              v-for="(label, cIndex) in alarmNameList"
              :key="cIndex"
              :value="label"
            >
              {{ label }}
            </option>
          </select>
        </template>
      </vxe-table-column>
      <vxe-table-column field="ip" title="ip地址"></vxe-table-column>
      <vxe-table-column field="t_id" title="设备id"></vxe-table-column>
      <vxe-table-column field="business_id" title="点位编号"></vxe-table-column>
      <vxe-table-column field="alarm_time" title="告警时间"></vxe-table-column>
      <vxe-table-column field="reason" title="告警原因"></vxe-table-column>
      <vxe-table-column
        v-if="!noclear"
        field="clear_time"
        title="消除时间"
      ></vxe-table-column>
    </vxe-table>
    <vxe-pager
      :loading="loading"
      :current-page="tablePage.currentPage"
      :page-size="tablePage.pageSize"
      :total="tablePage.totalResult"
      @page-change="handlePageChange"
      :layouts="[
        'PrevPage',
        'JumpNumber',
        'NextPage',
        'FullJump',
        'Sizes',
        'Total',
      ]"
    >
    </vxe-pager>
  </div>
</template>
<script>
var moment = require("moment");
moment.defaultFormat = "YYYY-MM-DD HH:mm:ss";
export default {
  data() {
    return {
      datas: [],
      //columns,
      loading: false,
      alarmTranslated: [],
      levelList: [
        { label: "1", value: 1 },
        { label: "2", value: 2 },
        { label: "3", value: 3 },
        { label: "4", value: 4 },
      ],
      alarmNameList: [],
      stationNameList: [],
      devNameList: [],

      tablePage: {
        currentPage: 1,
        pageSize: 30,
        totalResult: 0,
      },
    };
  },
  props: ["alarms", "height", "noclear", "hasQuery"],
  watch: {
    alarms: {
      handler(alarms) {
        console.log("alarm changed---------------------------------");
        if (alarms && Array.isArray(alarms)) {
          let sname = new Set();
          let ssname = new Set();
          let sdname = new Set();

          alarms.forEach((alarm) => {
            alarm.alarm_time = moment(alarm.alarm_time).format()
            alarm.clear_time = moment(alarm.clear_time).format()
            sname.add(alarm.alarm_name);
            if (alarm.station_name) {
              ssname.add(alarm.station_name);
            }
            sdname.add(alarm.thing_name);
            let oalarm = alarm.alarm_obj;
            if (oalarm && typeof alarm.alarm_obj == "string") {
              
              oalarm = JSON.parse(alarm.alarm_obj);
            }
            if (oalarm && oalarm.params) {
             
              alarm.reason = oalarm.params["reason"];
              //return alarm;
            }

            //alert("nodata");
            return alarm;
          });
          this.alarmTranslated = alarms;
          this.tablePage.totalResult = alarms.length;
          this.datas = alarms.slice(
            (this.tablePage.currentPage - 1) * this.tablePage.pageSize,
            this.tablePage.currentPage * this.tablePage.pageSize
          );
          this.alarmNameList = Array.from(sname);
          this.stationNameList = Array.from(ssname);
          this.devNameList = Array.from(sdname);
        } else {
          this.alarmNameList = [];
          this.stationNameList = [];
          this.devNameList = [];
        }
      },
    },
  },
  methods: {
    handlePageChange({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage;
      this.tablePage.pageSize = pageSize;
      this.openPage();
    },
    openPage() {
      console.log("open pages---------------------------------");
      this.datas = this.alarmTranslated.slice(
        (this.tablePage.currentPage - 1) * this.tablePage.pageSize,
        this.tablePage.currentPage * this.tablePage.pageSize
      );
    },
    exportToExcel() {
      this.$refs.xTable.exportData({
        filename: "导出",
        sheetName: "Sheet1",
        type: "xlsx",
      });
    },
    filterName({ option, row }) {
      return row.thing_name == option.data;
    },
    filterAlarmName({ option, row }) {
      return row.alarm_name == option.data;
    },
    filterStationName({ option, row }) {
      return row.station_name == option.data;
    },
  },
  computed: {
    tableHeight() {
      if (this.hasQuery) {
        return document.body.clientHeight - 280;
      }
      return document.body.clientHeight - 230;
    },
  },
};
</script>
<style>
.vxe-table--filter-wrapper {
  background-color: rgb(64, 64, 66);
  color: red;
}
.my-select {
  margin: 10px;
  width: 100px;
  height: 32px;
  color: black;
}
.my-input {
  margin: 10px;
  width: 140px;
  height: 32px;
}
.vxe-pager {
  background-color: black;
}
.vxe-pager .vxe-pager--jump .vxe-pager--goto {
  background-color: #989191;
}
.vxe-input--inner {
  background-color: #989191;
}
.vxe-pager .vxe-pager--jump-prev,
.vxe-pager .vxe-pager--prev-btn,
.vxe-pager .vxe-pager--next-btn,
.vxe-pager .vxe-pager--jump-next,
.vxe-pager .vxe-pager--num-btn {
  background-color: #989191;
}
.vxe-select--panel {
  color: #988e8e;
}
</style>
